import { Menu } from "@/api/interface";
import IconMap from "@/config/sideNavIconMap";
import { globalStore } from "@/stores/allStores";
import { ElIcon, ElMenuItem, ElSubMenu } from "element-plus";
import { PropType, computed, defineComponent } from "vue";
import c from './SubMenu.module.scss'
export default defineComponent({
  name: "subMenu",
  props: {
    menuList: {
      type: Array as PropType<Menu.MenuOptions[]>,
    },
  },
  setup(props) {
    const isCollapse = computed(() => globalStore.isCollapse);
    return () => {
      return (
        <div>
          {props.menuList &&
            props.menuList.map((item) =>
              item.children?.length ? (
                <ElSubMenu
                  index={item.meta.title}
                  v-slots={{
                    title: () => (
                      <>
                        <ElIcon size="18">{IconMap[item.meta.icon]}</ElIcon>
                        {isCollapse.value ? (
                          <span class={c.title}>
                            {item.meta.title}
                          </span>
                        ) : (
                          <span>{item.meta.title}</span>
                        )}
                      </>
                    ),
                  }}
                >
                  {item.children?.map((it) => (
                    <ElMenuItem
                      index={it.path}
                      v-slots={{
                        title: () => (
                          <>
                            <span>{it.meta.title}</span>
                          </>
                        ),
                      }}
                    >
                      <ElIcon>{IconMap[it.meta.icon]}</ElIcon>
                    </ElMenuItem>
                  ))}
                </ElSubMenu>
              ) : (
                <ElMenuItem
                  index={item.path}
                  v-slots={{
                    title: () => (
                      <>
                        <span>{item.meta.title}</span>
                      </>
                    ),
                  }}
                >
                  <ElIcon>{IconMap[item.meta.icon]}</ElIcon>
                </ElMenuItem>
              )
            )}
        </div>
      );
    };
  },
});
